<template>
    <view class="search-input">
        <uni-easyinput style="z-index: 15" @blur="handleBlur" @input="searchCompany($event)" @clear="handleClear"
            @focus="handleFocus" prefixIcon="search" v-model="searchValue" placeholder="请输入征信网点/银行名称">
            <template #right>
                <view v-show="isShowSearchBtn" class="search-btn" @click="handleSearch">搜索</view>
            </template>
        </uni-easyinput>
        <view class="search-box" v-show="serchList.length && showSelect">
            <scroll-view scroll-y style="max-height: 240rpx" @scrolltolower="scrolltolower">
                <view class="option" v-for="(option, index) in serchList" :key="index"
                    @click.stop="selectCompany(option)">
                    <view class="taxpayerName" v-if="current == 0">{{ option.outletsName }}</view>
                    <view class="taxpayerName" v-if="current == 1">{{ option.name }}</view>
                </view>
                <view class="loading" v-if="serchList.length && searchLoading">
                    <uv-loading-icon :show="searchLoading" text="加载数据中...."></uv-loading-icon>
                </view>
            </scroll-view>
        </view>
        <view class="mask" @click="closeSelect" v-show="serchList.length && showSelect"> </view>
    </view>
</template>
<script>
import Authorize from "@/components/Authorize.vue";
import { mapGetters } from 'vuex'
import { getNearbyListApi, getBankList } from '@/api/tools.js'
export default {
    name: 'searchInput',
    props: {
        current: {
            type: Number,
            default: 0
        },
        lon: {
            type: String,
            default: ''
        },
        lat: {
            type: String,
            default: ''
        },

    },
    // #ifdef MP-WEIXIN
    options: {
        styleIsolation: 'shared' // 解除样式隔离
    },
    // #endif
    components: {
        Authorize
    },
    computed: mapGetters(['isLogin']),
    data() {
        return {
            searchValue: '',
            serchList: [],
            showSelect: false,
            isShowAuth: false,
            where: {
                keyword: "",
                pageNum: 1,
                pageSize: 10
            },
            total: 0,
            searchLoading: false,
            timeoutId: null,
            selectInfo: {},
            isShowSearchBtn: false,

        }
    },
    methods: {
        closeSelect() {
            this.where.keyword = ""
            this.searchValue = ''
            this.showSelect = false;
            this.serchList = []
        },
        handleClear() {
            this.closeSelect()
            this.$emit('selectInfo', [])
            this.$emit('searchList', this.where.keyword)
        },
        handleSearch() {
            let reg = /^[^()\/?!\uFF1F\u3001\uFF01]+$/u;
            if (!this.searchValue) return this.$util.Tips('请输入搜索关键词')
            if (this.searchValue.length <= 1) return this.$util.Tips('搜索关键字至少两个字')
            if (!reg.test(this.searchValue)) return this.$util.Tips('请输入正确的关键词')
            this.isShowSearchBtn = true;
            this.where.keyword = this.searchValue
            this.showSelect = false;
            this.serchList = []
            this.$emit('searchList', this.where.keyword)


            let params = {
                Um_Key_ButtonName: '征信网点查询' + '-' + this.current == 0 ? '征信网点查询查询' : '银行通讯录查询',
                Um_Key_SourcePage: '征信网点查询',
            }
            this.$umaTrack.pageClickTrack(params)

        },
        selectCompany(v) {
            this.selectInfo = v;
            this.serchList = []
            this.showSelect = false;
            this.searchValue = this.current == 0 ? v.outletsName : v.name
            this.$emit('selectInfo', [this.selectInfo])
            this.$emit('searchList', this.searchValue)
        },
        onLoadFun() {

        },
        authColse() {
            this.isShowAuth = false
        },
        handleFocus() {
            if (this.searchValue.length && this.searchValue.length > 1) {
                this.isShowSearchBtn = true
                this.showSelect = true
                this.where.keyword = this.searchValue
                this.where.pageNum = 1
                this.serchList = []
                this.getSearchList()
            }


            let params = {
                Um_Key_ButtonName: '征信网点查询' + '-' + this.current == 0 ? '征信网点查询搜索框' : '银行通讯录搜索框',
                Um_Key_SourcePage: '征信网点查询',
            }
            this.$umaTrack.pageClickTrack(params)
        },
        handleBlur() {
            this.isShowSearchBtn = false
        },
        searchCompany(e) {
            this.serchList = [];
            this.showSelect = true;
            if (e != this.where.keyword) {
                this.serchList = [];
                this.where.pageNum = 1;
            }
            this.where.keyword = e?.trim();
            if (e.trim().length > 1) {
                let reg = /^[^()\/?!\uFF1F\u3001\uFF01]+$/u;
                if (!reg.test(e)) return this.$util.Tips(`请输入正确的公司名称或税号`);
                clearTimeout(this.timeoutId);
                this.isShowSearchBtn = true;
                // 设置新的定时器
                this.timeoutId = setTimeout(() => {
                    this.getSearchList();
                }, 500);  // 设置防抖的延迟时间（1秒）

            }
            if (e.length == 0) {
                return this.$emit('resetList')
            }
        },
        scrolltolower() {
            if (this.total > this.where.pageNum * this.where.pageSize) {
                this.where.pageNum++;
                this.getSearchList();
            }
        },

        async getSearchList() {
            if (this.current == 0) {
                let params = {
                    pageNum: this.where.pageNum,
                    pageSize: 10,
                    outletsName: this.where.keyword,
                    lon: this.lon,
                    lat: this.lat
                }
                getNearbyListApi(params).then(res => {
                    this.serchList = [...this.serchList, ...res.data.list]
                    this.total = res.data.total
                })


            } else if (this.current == 1) {
                let params = {
                    pageNum: this.where.pageNum,
                    pageSize: 10,
                    name: this.where.keyword,
                }
                getBankList(params).then(res => {
                    this.serchList = [...this.serchList, ...res.data.list]
                    this.total = res.data.total
                })
            }


        },
    },
} 
</script>
<style lang="scss" scoped>
/deep/ .uni-easyinput__content {
    width: 688rpx;
    height: 96rpx;
}

/deep/ .uni-icons {
    color: #2872FD !important;
}

/deep/ .uniui-clear {
    color: #999 !important;
}

/deep/ .uni-easyinput__placeholder-class {
    font-weight: 600;
    font-size: 30rpx;
    color: #E6E6E6;
}

.search-btn {
    width: 120rpx;
    height: 64rpx;
    line-height: 64rpx;
    text-align: center;
    background: #2872FD;
    border-radius: 20rpx;
    color: #fff;
    z-index: 15;
}

.search-input {
    margin: 30rpx 0;
    position: relative;

    .search-box {
        position: absolute;
        width: 100%;
        max-height: 273rpx;
        background: #F7F7F7;
        border-radius: 20rpx;
        padding: 30rpx;
        z-index: 1;
    }
}

.search-btn {
    width: 120rpx;
    height: 64rpx;
    line-height: 64rpx;
    text-align: center;
    background: #2872FD;
    border-radius: 20rpx;
    color: #fff;
}

.option {
    line-height: 40rpx;
    margin-bottom: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .taxpayerName {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0; // 修复flex布局下的收缩问题
    }

    &:last-child {
        margin-bottom: 0rpx;
    }

    .delete {
        width: 30rpx;
        height: 30rpx;
    }
}
</style>